import { useRequest } from "ahooks";
import { Space,} from "antd";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import React, { useEffect, useState } from "react";
import { Carousel } from 'react-responsive-carousel';
import * as APIS from "../../../../constants/api-constants";

interface DetailProps {
  setDetailFalse: () => void;
  productUuid: string
}
export default ({ setDetailFalse, productUuid }: DetailProps) => {
  const [productDetail, setProductDetail] = useState<ProjectList.ProductDetail>();
  /**
   * 获取当前 productUuid 对应的成果信息
   */
  const { run } = useRequest(() =>({
    url: APIS.PRODUCT_DETALI,
    method: 'GET',
    params: {
      productUuid
    }
  }), {
    manual: true,
    onSuccess: (result) => {
      const { result: detail } = result.data.mainData;
      setProductDetail(detail);
    }
  });

  useEffect(() => {
    if (productUuid) {
      run();
    }
  }, [productUuid, run]);

  return (
    <>
      <Space size={50} style={{
            backgroundImage: `url(/tec_zt_1.jpg)`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            height: '250px',
            minWidth: '100%',
            marginBottom: '30px',
      }}>
        {/* 轮播图左边的间隔 */}
          <div style={{width: '1px'}}></div>
            <Carousel
              width={180}
              showArrows={true}
              showThumbs={false}
              infiniteLoop={true}
            >
              {
                productDetail?.imageList.map((imageUrl) => (
                  <div
                   style={{width: '180px', height: '180px'}}
                  >
                    <img src={imageUrl} alt='' />
                  </div>
                ))
              }
            </Carousel>
            <div style={{
              float: 'right',
              // marginBottom: '30px',
              color: '#fff',
            }}>
              <div><h3 style={{color: '#fff', fontSize: '125%'}}><b>成果名称：</b>{productDetail?.name}</h3></div>
              <div><h3 style={{color: '#fff', fontSize: '125%'}}><b>所属单位：</b>{productDetail?.unit}</h3></div>
              <div><h3 style={{color: '#fff', fontSize: '125%'}}><b>所属领域：</b>{productDetail?.applicationArea}</h3></div>
            </div>
      </Space>
      <div 
        style={{
          backgroundImage: `url('/tec_zt_2.png')`,
          backgroundRepeat: 'no-repeat',
          paddingLeft: '60px',
          fontSize: '16px',
          fontWeight: 'normal',
          height: '40px',
          lineHeight: '40px',
          color: '#fff',
          marginBottom: '20px',
        }}>成果简介</div>
      <div style={{ textIndent: '2em', fontSize: '14px', padding: '0 20px 10px'}}>
        {productDetail?.description}
      </div>
    </>
  );
}
